<template>
  <div>
    <FosoCard :showheader="false" :title="title">
      <FosoForm
        ref="formRef"
        :form-columns="formColumns"
        :form-columns-num="8"
        :form-data="formData"
        :form-expand="true"
        label-position="right"
        label-width="auto"
      />
    </FosoCard>
    <FosoCard :showheader="false" class="cleartable !pt-0">
      <!-- 表格 -->
      <Grid>
        <!-- 表格操作 -->
        <template #action>
          <el-button :icon="Edit" link type="primary" />
          <el-button :icon="Delete" link type="danger" />
        </template>
        <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
        <template #toolbar-buttons>
          <el-button class="ml-auto" type="primary"> 新增职位 </el-button>
        </template>
      </Grid>
    </FosoCard>
  </div>
</template>

<script setup lang="tsx">
import { Delete, Edit } from '@element-plus/icons-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { useTable } from '#/hooks/usetable';
// 表单实例
const formRef = ref();
const title = ref('部门管理');
// 表单数据
const formData = ref({
  name: '',
  age: 18,
  gender: '',
  gender2: '',
  checkedCities: ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'],
  gender3: '',
  cascader: [],
  allselect: false,
  gender4: '',
  tree: [], // Tree 组件绑定的数据
});

const data = ref([
  {
    id: 1,
    name: '系统管理',
    type: '目录',
  },
  {
    id: 2,
    name: '用户管理',
    type: '目录',
  },

  {
    name: '角色管理',
    type: '目录',
  },
  {
    name: '菜单管理',
    type: '目录',
  },
  {
    name: '权限管理',
    type: '目录',
  },
  {
    name: '日志管理',
    type: '目录',
  },
  {
    name: '系统设置',
    type: '目录',
  },
  {
    name: '数据字典',
    type: '目录',
  },
]);

// 表格事件
const gridEvents = {};
// 设置表头
// 表格配置项
const { tableconfig } = useTable({
  data: data.value,
  columns: [
    {
      title: '序号',
      type: 'seq',
      width: 50,
    },
    {
      title: '职位名称',
      field: 'name',
    },
    {
      title: '职位代码',
      field: 'type',
    },
    {
      title: '备注',
      field: 'path',
    },
    {
      title: '排序',
      field: 'component',
    },
    {
      title: '权限',
      field: 'permission',
    },
    // 状态
    {
      title: '状态',
      field: 'status',
      type: undefined, // Explicitly set type to undefined if not required
    },
    // 创建时间
    {
      title: '创建时间',
      field: 'createTime',
      width: 180,
    },
    { title: '按钮', width: 200, slots: { default: 'action' } },
  ],
});
// 表格实例
const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions: tableconfig.value });
// 表单配置项
const formColumns = computed(() => [
  {
    label: '职位名称', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入', // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },

  {
    label: '职位代码', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入', // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
  {
    label: '备注', // 表单项的标签
    prop: 'name', // 绑定到 formData.name
    xType: 'Input',
    span: 8, // 自行配置行宽
    componentProps: {
      placeholder: '请输入', // el-input 的属性
      clearable: true, // el-input 的属性
    },
  },
]);

// 提交表单
// const submitForm = async () => {
//   await formRef.value.formRef.validate();
// };
</script>
